<template>
<div>
  <pubLicTop/>
  <div class="hostData-page">
    <div class="index-top">
      <div class="top-left-box">
        <signInChart/>
      </div>
      <div class="top-right-box">
        <classSystem/>
      </div>
    </div>
    <div class="index-bottom">
      <div class="bottom-item">
        <Population/>
      </div>
      <div class="bottom-item">
        <quantityData/>
      </div>
      <div class="bottom-item">
        <renShuFenBu/>
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
import signInChart from '@/components/signInChart'
import HelloWorld from '@/components/HelloWorld'
import classSystem from '@/components/classSystem'
import Population from '@/components/population'
import quantityData from '@/components/quantityData'
import renShuFenBu from '@/components/renShuFenBu'
import pubLicTop from "@/components/pubLicTop"
export default {
  components:{
    signInChart,
    classSystem,
    Population,
    quantityData,
    renShuFenBu,
    pubLicTop
  }
}
</script>

<style lang="scss" scoped>
.hostData-page{
  .index-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .top-left-box,.top-right-box{
      height: 454px;
      background:rgba(32,34,36,1);
      border:1px solid rgba(66,67,69,1);
    }
    .top-left-box{
      // width: 700px;
      width: 650px;
    }
    .top-right-box{
      flex: 1;
      margin-left: 20px;
    }
  }
  .index-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .bottom-item{
      height: 355px;
      flex: 1;
      background:rgba(32,34,36,1);
      border:1px solid rgba(66,67,69,1);
    }
    .bottom-item+.bottom-item{
      margin-left: 20px;
    }
  }
}

</style>